<template>
	<div class="echarts">
    <div class="bar-echarts-box" ref="lineCharts" :id="lineid"></div>
		<span class="nodata" v-show="linedatax.length<=0">暂无数据</span>
	</div>
</template>

<script>
	export default {
		name: 'line-echarts',
		data() {
			return {
				myChart: null,
				legend: ['I级风险', 'II级风险', 'III级风险', 'IV级风险']
			}
		},
		props: ['lineid','linename', 'linedatax', 'linedatay','linetype','linedatay1'],
		mounted() {
			window.addEventListener('resize', () => {
				if( this.myChart){
					 this.myChart.resize();
				}
			})
			if (this.linedatax.length > 0) {
				this.initCharts()
			}

		},
		watch: {
			linedatax: function(val) {
				if (this.myChart) {
					this.myChart.dispose()
				}
        if(this.linedatax.length>0){
          this.initCharts();
        }
			},
		},
		methods: {
			initCharts() {
				this.myChart = this.$echarts.init(this.$refs.lineCharts);
				let option = {
					tooltip: {
						trigger: 'axis'
					},
					dataZoom: [ //给x轴设置滚动条
						{
							start: 0, //默认为0
							end:  7/this.linedatax.length*100, //默认为100
							type: 'slider',
							show: this.linedatax.length>7,
							xAxisIndex: [0],
							handleSize: 0, //滑动条的 左右2个滑动条的大小
							height: 8, //组件高度
							left: '10%', //左边的距离
							right: '10%', //右边的距离
							bottom: -1, //下边的距离
							borderColor: "#000",
							fillerColor: '#385290',
							borderRadius: 10,
							backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色
							showDataShadow: false, //是否显示数据阴影 默认auto
							showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
							realtime: true, //是否实时更新
							filterMode: 'filter',
						},
						//下面这个属性是里面拖到
						{
							type: 'inside',
							show: this.linedatax.length>7,
							xAxisIndex: [0],
							start: 0, //默认为1
							end:  7/this.linedatax.length*100, //默认为100
						},
					],
					grid: {
						top: '20',
						left: '60',
						right: '40',
						bottom: '10',
						containLabel: true
					},
					color: ['#81C7CA'],
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.linedatax,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#FFFFFF' //这里用参数代替了
							},
							interval: 0,
							rotate: 10
						},


					},
					yAxis: {
						type: 'value',
						axisLabel: {
							show: true,
							textStyle: {
								color: '#FFFFFF' //这里用参数代替了
							},
						},
						splitLine: { //改变横向网格线的颜色
							show: true,
							lineStyle: {
								color: ['#262D4F'],
								width: 1,
								type: 'solid'
							}
						},
						axisLine: {
							show: false
						},
					},
					series: [{
							name: this.linename[0],
							type: 'line',
							stack: '总量',
							data: this.linedatay,
							lineStyle: {
								normal: {
									color: '#0ACDC5',
									width: 2,
									type: 'dotted'
								}
							},
							itemStyle: {
								normal: { //柱状图颜色
									// color:'#ff6600',
									label: {
										show: true, //显示文本
										position: 'top', //数据值位置
										textStyle: {
											fontSize: '10'
										}
									}
								}
							},
						},
					]
				};
				if(this.linetype=="twoLine"){
					option.series.push({
							name: this.linename[1],
							type: 'line',
							// stack: '总量',
							data: this.linedatay1,
							lineStyle: {
								normal: {
									color: '#2d8cf0',
									width: 2,
									type: 'dotted'
								}
							},
							itemStyle: {
								normal: { //柱状图颜色
									color:'#2d8cf0',
									label: {
										show: true, //显示文本
										position: 'top', //数据值位置
										textStyle: {
											fontSize: '10'
										}
									}
								}
							},
						})
				}
        this.myChart.clear();
				this.myChart.setOption(option);
			}
		}
	}
</script>

<style scoped lang="scss">
	.echarts {
		width: 100%;
		height: 100%;
		position: relative;
		.bar-echarts-box {
			width:  100%;
			height: 100%;
			float: right;
		}
		.nodata {
			width: 100%;
			position: absolute;
			top: 50%;
			// left: 0;
			text-align: center;
			transform: translateY(-50%);
			float: right;
		}
	}
</style>
